<template>
  <CollapsibleSection
    title="现病史"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >
  
   <!-- 表单 -->
   <div class="form-container">
     <p class="tip">带★为必填项，可点击展开填写详情</p>

     <!-- 进度条 -->
     <div class="progress-bar">
       <div class="progress-bar-inner">
         <div
           v-for="(step, idx) in steps"
           :key="idx"
           class="progress-step"
           :class="{ active: currentSection === idx + 1 }"
         >
           <div class="step-number">{{ idx + 1 }}</div>
           <div class="step-name">{{ step }}</div>
         </div>
       </div>
     </div>

     <!-- 表单部分 -->
     <form>
       <!-- 1. 起病情况 -->
       <div class="form-section" v-show="currentSection === 1">
         <h2 class="required">1. 起病情况（S - Onset）</h2>

         <div class="form-group">
           <label for="onset-time">起病具体时间</label>
          <picker mode="date" :value="form.onset.time || todayStr" @change="onOnsetPickerNative">
            <view id="onset-time" class="form-input datetime-display">
              {{ displayDateTime || '请选择起病具体时间' }}
            </view>
          </picker>
         </div>

         <div class="form-group">
           <label>起病地点</label>
           <div class="radio-group">
            <div class="radio-item" :class="{ 'is-checked': form.onset.location === '家中' }" @click="form.onset.location = '家中'">
              <input type="radio" value="家中" v-model="form.onset.location" />
              <span class="radio-label">家中</span>
            </div>
            <div class="radio-item" :class="{ 'is-checked': form.onset.location === '工作场所' }" @click="form.onset.location = '工作场所'">
              <input type="radio" value="工作场所" v-model="form.onset.location" />
              <span class="radio-label">工作场所</span>
            </div>
            <div class="radio-item" :class="{ 'is-checked': form.onset.location === '户外' }" @click="form.onset.location = '户外'">
              <input type="radio" value="户外" v-model="form.onset.location" />
              <span class="radio-label">户外</span>
            </div>
            <div class="radio-item" :class="{ 'is-checked': form.onset.location === '其他' }" @click="form.onset.location = '其他'">
              <input type="radio" value="其他" v-model="form.onset.location" />
              <span class="radio-label">其他</span>
            </div>
             <input
               v-if="form.onset.location === '其他'"
               class="form-input inline-input"
               type="text"
               placeholder="请填写其他地点"
               v-model="form.onset.locationOther"
               @click.stop
             />
           </div>
         </div>

         <div class="form-group">
           <label>起病形式</label>
            <div class="radio-group">
             <div class="radio-item" :class="{ 'is-checked': form.onset.type === '急性' }" @click="form.onset.type = '急性'">
               <input type="radio" value="急性" v-model="form.onset.type" />
               <span class="radio-label">急性（数分钟至数小时）</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.onset.type === '亚急性' }" @click="form.onset.type = '亚急性'">
               <input type="radio" value="亚急性" v-model="form.onset.type" />
               <span class="radio-label">亚急性（数天）</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.onset.type === '慢性' }" @click="form.onset.type = '慢性'">
               <input type="radio" value="慢性" v-model="form.onset.type" />
               <span class="radio-label">慢性（数周及以上）</span>
             </div>
           </div>
         </div>

         <div class="form-group">
           <label for="onset-cause">可能诱因</label>
           <input id="onset-cause" class="form-input" type="text" v-model="form.onset.cause" placeholder="如：受凉后、进食油腻食物后" />
         </div>

         <div class="nav-buttons">
           <button type="button" class="nav-btn next" @click="goTo(2)">下一步</button>
         </div>
       </div>

       <!-- 2. 主要症状特征 -->
       <div class="form-section" v-show="currentSection === 2">
         <h2 class="required">2. 主要症状特征（O - Manifestations）</h2>
         <p>针对主诉症状详细描述，可添加多个症状</p>

         <div id="symptoms-container">
           <div class="symptom-item" v-for="(symptom, sIdx) in form.symptoms" :key="symptom.id">
             <div class="form-group">
               <label :for="`symptom-${sIdx}`">症状</label>
               <input :id="`symptom-${sIdx}`" class="form-input" type="text" v-model="symptom.name" placeholder="如：腹痛、咳嗽" />
             </div>

             <div class="form-group">
               <label :for="`location-${sIdx}`">部位</label>
               <input :id="`location-${sIdx}`" class="form-input" type="text" v-model="symptom.location" placeholder="如：上腹部、右侧胸部" />
             </div>

             <div class="form-group">
               <label :for="`nature-${sIdx}`">性质</label>
               <input :id="`nature-${sIdx}`" class="form-input" type="text" v-model="symptom.nature" placeholder="如：绞痛、干咳、烧灼样" />
             </div>

             <div class="form-group">
               <label>程度</label>
               <div class="radio-group">
                 <div class="radio-item" :class="{ 'is-checked': symptom.severity === '轻微' }" @click="symptom.severity = '轻微'">
                   <input type="radio" value="轻微" v-model="symptom.severity" />
                   <span class="radio-label">轻微（不影响日常）</span>
                 </div>
                 <div class="radio-item" :class="{ 'is-checked': symptom.severity === '中度' }" @click="symptom.severity = '中度'">
                   <input type="radio" value="中度" v-model="symptom.severity" />
                   <span class="radio-label">中度（影响部分活动）</span>
                 </div>
                 <div class="radio-item" :class="{ 'is-checked': symptom.severity === '重度' }" @click="symptom.severity = '重度'">
                   <input type="radio" value="重度" v-model="symptom.severity" />
                   <span class="radio-label">重度（无法活动）</span>
                 </div>
               </div>
             </div>

             <div class="form-group">
               <label>频率</label>
               <div class="radio-group">
                 <div class="radio-item" :class="{ 'is-checked': symptom.frequency.type === '持续存在' }" @click="symptom.frequency.type = '持续存在'">
                   <input type="radio" value="持续存在" v-model="symptom.frequency.type" />
                   <span class="radio-label">持续存在</span>
                 </div>
                 <div class="radio-item" :class="{ 'is-checked': symptom.frequency.type === '间歇发作' }" @click="symptom.frequency.type = '间歇发作'">
                   <input type="radio" value="间歇发作" v-model="symptom.frequency.type" />
                   <span class="radio-label">间歇发作</span>
                 </div>
                 <input
                   v-if="symptom.frequency.type === '间歇发作'"
                   class="inline-input"
                   type="text"
                   placeholder="每____小时/天发作____次"
                   v-model="symptom.frequency.detail"
                   @click.stop
                 />
               </div>
             </div>

             <div class="form-group">
               <label :for="`duration-${sIdx}`">持续时间</label>
               <input :id="`duration-${sIdx}`" class="form-input" type="text" v-model="symptom.duration" placeholder="如：每次发作约30分钟" />
             </div>

             <button type="button" class="remove-btn" v-if="form.symptoms.length > 1" @click="removeSymptom(sIdx)">删除</button>
           </div>
         </div>

         <button type="button" class="add-btn" @click="addSymptom">添加其他症状</button>

         <div class="nav-buttons">
           <button type="button" class="nav-btn" @click="goTo(1)">上一步</button>
           <button type="button" class="nav-btn next" @click="goTo(3)">下一步</button>
         </div>
       </div>

       <!-- 3. 伴随症状 -->
       <div class="form-section" v-show="currentSection === 3">
         <h2>3. 伴随症状（A - Accompanying Symptoms）</h2>
         <p>勾选或填写与主诉同时出现的症状，阴性症状也需记录</p>

         <div class="form-group">
           <div class="checkbox-group">
             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.fever.enabled }" @click.self="form.accompany.fever.enabled = !form.accompany.fever.enabled">
               <input type="checkbox" v-model="form.accompany.fever.enabled" />
               <span class="checkbox-label">发热</span>
             </div>
             <input v-if="form.accompany.fever.enabled" class="form-input inline-input" type="text" placeholder="体温____℃" v-model="form.accompany.fever.temp" @click.stop />

             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.chills }" @click="form.accompany.chills = !form.accompany.chills">
               <input type="checkbox" v-model="form.accompany.chills" />
               <span class="checkbox-label">寒战</span>
             </div>

             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.nausea.enabled }" @click.self="form.accompany.nausea.enabled = !form.accompany.nausea.enabled">
               <input type="checkbox" v-model="form.accompany.nausea.enabled" />
               <span class="checkbox-label">恶心/呕吐</span>
             </div>
             <input v-if="form.accompany.nausea.enabled" class="form-input inline-input" type="text" placeholder="呕吐物性质____" v-model="form.accompany.nausea.detail" @click.stop />

             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.diarrhea.enabled }" @click.self="form.accompany.diarrhea.enabled = !form.accompany.diarrhea.enabled">
               <input type="checkbox" v-model="form.accompany.diarrhea.enabled" />
               <span class="checkbox-label">腹泻/便秘</span>
             </div>
             <input v-if="form.accompany.diarrhea.enabled" class="form-input inline-input" type="text" placeholder="次数____，性状____" v-model="form.accompany.diarrhea.detail" @click.stop />

             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.rash }" @click="form.accompany.rash = !form.accompany.rash">
               <input type="checkbox" v-model="form.accompany.rash" />
               <span class="checkbox-label">皮疹</span>
             </div>

             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.dizziness }" @click="form.accompany.dizziness = !form.accompany.dizziness">
               <input type="checkbox" v-model="form.accompany.dizziness" />
               <span class="checkbox-label">头晕/头痛</span>
             </div>

             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.dyspnea }" @click="form.accompany.dyspnea = !form.accompany.dyspnea">
               <input type="checkbox" v-model="form.accompany.dyspnea" />
               <span class="checkbox-label">呼吸困难</span>
             </div>

             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.palpitation }" @click="form.accompany.palpitation = !form.accompany.palpitation">
               <input type="checkbox" v-model="form.accompany.palpitation" />
               <span class="checkbox-label">心悸</span>
             </div>

             <div class="checkbox-item" :class="{ 'is-checked': form.accompany.urinary }" @click="form.accompany.urinary = !form.accompany.urinary">
               <input type="checkbox" v-model="form.accompany.urinary" />
               <span class="checkbox-label">尿频/尿急/尿痛</span>
             </div>
           </div>
         </div>

         <div class="form-group">
           <label for="other-symptoms">其他</label>
           <input id="other-symptoms" class="form-input" type="text" v-model="form.accompany.other" placeholder="如：无胸痛、无关节肿痛" />
         </div>

         <div class="nav-buttons">
           <button type="button" class="nav-btn" @click="goTo(2)">上一步</button>
           <button type="button" class="nav-btn next" @click="goTo(4)">下一步</button>
         </div>
       </div>

       <!-- 4. 加重与缓解因素 -->
       <div class="form-section" v-show="currentSection === 4">
         <h2>4. 加重与缓解因素（P - Provoking/Palliative Factors）</h2>

         <div class="form-group">
           <label for="aggravating-factors">加重因素</label>
           <input id="aggravating-factors" class="form-input" type="text" v-model="form.factors.aggravating" placeholder="如：活动后加重、进食后加重" />
         </div>

         <div class="form-group">
           <label for="relieving-factors">缓解因素</label>
           <input id="relieving-factors" class="form-input" type="text" v-model="form.factors.relieving" placeholder="如：休息后减轻、服用药物后缓解" />
         </div>

         <div class="nav-buttons">
           <button type="button" class="nav-btn" @click="goTo(3)">上一步</button>
           <button type="button" class="nav-btn next" @click="goTo(5)">下一步</button>
         </div>
       </div>

       <!-- 5. 诊疗经过 -->
       <div class="form-section" v-show="currentSection === 5">
         <h2>5. 诊疗经过（C - Course & Care）</h2>

         <div class="form-group">
           <label>院外就诊情况</label>
           <div class="radio-group">
             <div class="radio-item" :class="{ 'is-checked': form.care.visitStatus === '未就诊' }" @click="form.care.visitStatus = '未就诊'">
               <input type="radio" value="未就诊" v-model="form.care.visitStatus" />
               <span class="radio-label">未就诊</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.care.visitStatus === '曾就诊' }" @click="form.care.visitStatus = '曾就诊'">
               <input type="radio" value="曾就诊" v-model="form.care.visitStatus" />
               <span class="radio-label">曾就诊于</span>
             </div>
             <input v-if="form.care.visitStatus === '曾就诊'" class="form-input inline-input" type="text" placeholder="____医院" v-model="form.care.hospitalName" @click.stop />
             <input v-if="form.care.visitStatus === '曾就诊'" class="form-input inline-input" type="date" v-model="form.care.visitDate" @click.stop />
           </div>
         </div>

         <div class="form-group">
           <label for="outside-diagnosis">院外诊断</label>
           <input id="outside-diagnosis" class="form-input" type="text" v-model="form.care.outsideDiagnosis" placeholder="如：急性胃炎、上呼吸道感染" />
         </div>

         <div class="form-group">
           <label for="examination-results">检查项目及结果</label>
           <textarea 
             id="examination-results" 
             class="form-input" 
             rows="3" 
             :value="form.care.exams"
             @input="(e: any) => handleTextareaInput('care.exams', e)"
             placeholder="如：血常规示白细胞升高"
           ></textarea>
         </div>

         <div class="form-group">
           <label for="treatment">用药/疗法</label>
           <textarea 
             id="treatment" 
             class="form-input" 
             rows="3" 
             :value="form.care.treatment"
             @input="(e: any) => handleTextareaInput('care.treatment', e)"
             placeholder="药名，剂量____，用法____，疗程____天，效果：□有效 □无效 □加重"
           ></textarea>
         </div>

         <div class="nav-buttons">
           <button type="button" class="nav-btn" @click="goTo(4)">上一步</button>
           <button type="button" class="nav-btn next" @click="goTo(6)">下一步</button>
         </div>
       </div>

       <!-- 6. 疾病演变 -->
       <div class="form-section" v-show="currentSection === 6">
         <h2 class="required">6. 疾病演变（H - History of Progression）</h2>

         <div class="form-group">
           <div class="radio-group">
             <div class="radio-item" :class="{ 'is-checked': form.progression.type === '症状持续存在,无明显变化' }" @click="form.progression.type = '症状持续存在,无明显变化'">
               <input type="radio" value="症状持续存在,无明显变化" v-model="form.progression.type" />
               <span class="radio-label">症状持续存在,无明显变化</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.progression.type === '间歇发作' }" @click="form.progression.type = '间歇发作'">
               <input type="radio" value="间歇发作" v-model="form.progression.type" />
               <span class="radio-label">间歇发作,发作频率/程度</span>
             </div>
             <select v-if="form.progression.type === '间歇发作'" v-model="form.progression.frequencyChange" class="form-input inline-input" @click.stop>
               <option value="">请选择</option>
               <option value="增加">增加</option>
               <option value="减少">减少</option>
               <option value="不变">不变</option>
             </select>
             <div class="radio-item" :class="{ 'is-checked': form.progression.type === '进行性加重' }" @click="form.progression.type = '进行性加重'">
               <input type="radio" value="进行性加重" v-model="form.progression.type" />
               <span class="radio-label">进行性加重</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.progression.type === '逐渐缓解' }" @click="form.progression.type = '逐渐缓解'">
               <input type="radio" value="逐渐缓解" v-model="form.progression.type" />
               <span class="radio-label">逐渐缓解</span>
             </div>
           </div>
         </div>

         <div class="form-group">
           <label for="progression-details">具体变化过程</label>
           <textarea 
             id="progression-details" 
             class="form-input" 
             rows="3" 
             :value="form.progression.details"
             @input="(e: any) => handleTextareaInput('progression.details', e)"
           ></textarea>
         </div>

         <div class="nav-buttons">
           <button type="button" class="nav-btn" @click="goTo(5)">上一步</button>
           <button type="button" class="nav-btn next" @click="goTo(7)">下一步</button>
         </div>
       </div>

       <!-- 7. 一般情况 -->
       <div class="form-section" v-show="currentSection === 7">
         <h2 class="required">7. 一般情况（A - General Condition）</h2>

         <div class="form-group">
           <label>精神状态</label>
           <div class="radio-group">
             <div class="radio-item" :class="{ 'is-checked': form.general.mental === '良好' }" @click="form.general.mental = '良好'">
               <input type="radio" value="良好" v-model="form.general.mental" />
               <span class="radio-label">良好</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.mental === '萎靡' }" @click="form.general.mental = '萎靡'">
               <input type="radio" value="萎靡" v-model="form.general.mental" />
               <span class="radio-label">萎靡</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.mental === '烦躁' }" @click="form.general.mental = '烦躁'">
               <input type="radio" value="烦躁" v-model="form.general.mental" />
               <span class="radio-label">烦躁</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.mental === '嗜睡' }" @click="form.general.mental = '嗜睡'">
               <input type="radio" value="嗜睡" v-model="form.general.mental" />
               <span class="radio-label">嗜睡</span>
             </div>
           </div>
         </div>

         <div class="form-group">
           <label>食欲</label>
           <div class="radio-group">
             <div class="radio-item" :class="{ 'is-checked': form.general.appetite === '正常' }" @click="form.general.appetite = '正常'">
               <input type="radio" value="正常" v-model="form.general.appetite" />
               <span class="radio-label">正常</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.appetite === '减退' }" @click="form.general.appetite = '减退'">
               <input type="radio" value="减退" v-model="form.general.appetite" />
               <span class="radio-label">减退</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.appetite === '拒食' }" @click="form.general.appetite = '拒食'">
               <input type="radio" value="拒食" v-model="form.general.appetite" />
               <span class="radio-label">拒食</span>
             </div>
           </div>
         </div>

         <div class="form-group">
           <label>睡眠</label>
           <div class="radio-group">
             <div class="radio-item" :class="{ 'is-checked': form.general.sleep === '正常' }" @click="form.general.sleep = '正常'">
               <input type="radio" value="正常" v-model="form.general.sleep" />
               <span class="radio-label">正常</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.sleep === '入睡困难' }" @click="form.general.sleep = '入睡困难'">
               <input type="radio" value="入睡困难" v-model="form.general.sleep" />
               <span class="radio-label">入睡困难</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.sleep === '易醒' }" @click="form.general.sleep = '易醒'">
               <input type="radio" value="易醒" v-model="form.general.sleep" />
               <span class="radio-label">易醒</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.sleep === '失眠' }" @click="form.general.sleep = '失眠'">
               <input type="radio" value="失眠" v-model="form.general.sleep" />
               <span class="radio-label">失眠</span>
             </div>
           </div>
         </div>

         <div class="form-group">
           <label>体重</label>
           <div class="radio-group">
             <div class="radio-item" :class="{ 'is-checked': form.general.weight.change === '无明显变化' }" @click="form.general.weight.change = '无明显变化'">
               <input type="radio" value="无明显变化" v-model="form.general.weight.change" />
               <span class="radio-label">无明显变化</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.weight.change === '减轻' }" @click="form.general.weight.change = '减轻'">
               <input type="radio" value="减轻" v-model="form.general.weight.change" />
               <span class="radio-label">减轻</span>
             </div>
             <div v-if="form.general.weight.change === '减轻'" class="inline-inputs-group">
               <input class="form-input inline-input" type="number" placeholder="____kg" v-model.number="form.general.weight.amount" @click.stop />
               <span class="inline-text">（近</span>
               <input class="form-input inline-input" type="text" placeholder="____时间" v-model="form.general.weight.period" @click.stop />
               <span class="inline-text">）</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.weight.change === '增加' }" @click="form.general.weight.change = '增加'">
               <input type="radio" value="增加" v-model="form.general.weight.change" />
               <span class="radio-label">增加</span>
             </div>
             <div v-if="form.general.weight.change === '增加'" class="inline-inputs-group">
               <input class="form-input inline-input" type="number" placeholder="____kg" v-model.number="form.general.weight.amount" @click.stop />
               <span class="inline-text">（近</span>
               <input class="form-input inline-input" type="text" placeholder="____时间" v-model="form.general.weight.period" @click.stop />
               <span class="inline-text">）</span>
             </div>
           </div>
         </div>

         <div class="form-group">
           <label>大小便</label>
           <div class="radio-group">
             <div class="radio-item" :class="{ 'is-checked': form.general.excretion.type === '正常' }" @click="form.general.excretion.type = '正常'">
               <input type="radio" value="正常" v-model="form.general.excretion.type" />
               <span class="radio-label">正常</span>
             </div>
             <div class="radio-item" :class="{ 'is-checked': form.general.excretion.type === '异常' }" @click="form.general.excretion.type = '异常'">
               <input type="radio" value="异常" v-model="form.general.excretion.type" />
               <span class="radio-label">异常</span>
             </div>
             <input v-if="form.general.excretion.type === '异常'" class="form-input inline-input" type="text" placeholder="描述:____" v-model="form.general.excretion.detail" @click.stop />
           </div>
         </div>

         <div class="nav-buttons">
           <button type="button" class="nav-btn" @click="goTo(6)">上一步</button>
           <button type="button" class="nav-btn next" @click="goTo(8)">下一步</button>
         </div>
       </div>

       <!-- 8. 有鉴别意义的阴性病史 -->
       <div class="form-section" v-show="currentSection === 8">
         <h2>8. 有鉴别意义的阴性病史（I - Important Negative History）</h2>
         <p>记录与疑似诊断相关但未出现的关键症状</p>

         <div class="form-group">
           <textarea 
             class="form-input" 
             rows="4" 
             :value="form.negativeHistory"
             @input="(e: any) => handleTextareaInput('negativeHistory', e)"
             placeholder="如：胸痛无后背放射、头痛无喷射性呕吐"
           ></textarea>
         </div>

         <div class="nav-buttons">
           <button type="button" class="nav-btn" @click="goTo(7)">上一步</button>
           <button type="button" class="nav-btn next" @click="goTo(9)">下一步</button>
         </div>
       </div>

       <!-- 9. 就诊原因 -->
       <div class="form-section" v-show="currentSection === 9">
         <h2 class="required">9. 就诊原因（N - Reason for Encounter）</h2>

         <div class="form-group">
           <div class="checkbox-group">
             <div class="checkbox-item" :class="{ 'is-checked': form.reason.reasons.includes('症状突然加重') }" @click="toggleReason('症状突然加重')">
               <input type="checkbox" value="症状突然加重" v-model="form.reason.reasons" />
               <span class="checkbox-label">症状突然加重</span>
             </div>
             <div class="checkbox-item" :class="{ 'is-checked': form.reason.reasons.includes('出现新症状') }" @click="toggleReason('出现新症状')">
               <input type="checkbox" value="出现新症状" v-model="form.reason.reasons" />
               <span class="checkbox-label">出现新症状</span>
             </div>
             <input v-if="form.reason.reasons.includes('出现新症状')" class="form-input inline-input" type="text" placeholder="____" v-model="form.reason.newSymptomDetail" @click.stop />

             <div class="checkbox-item" :class="{ 'is-checked': form.reason.reasons.includes('院外治疗效果不佳') }" @click="toggleReason('院外治疗效果不佳')">
               <input type="checkbox" value="院外治疗效果不佳" v-model="form.reason.reasons" />
               <span class="checkbox-label">院外治疗效果不佳</span>
             </div>

             <div class="checkbox-item" :class="{ 'is-checked': form.reason.reasons.includes('例行复查') }" @click="toggleReason('例行复查')">
               <input type="checkbox" value="例行复查" v-model="form.reason.reasons" />
               <span class="checkbox-label">例行复查</span>
             </div>

             <div class="checkbox-item" :class="{ 'is-checked': form.reason.reasons.includes('其他') }" @click="toggleReason('其他')">
               <input type="checkbox" value="其他" v-model="form.reason.reasons" />
               <span class="checkbox-label">其他</span>
             </div>
             <input v-if="form.reason.reasons.includes('其他')" class="form-input inline-input" type="text" placeholder="____" v-model="form.reason.otherDetail" @click.stop />
           </div>
         </div>

         <div class="form-group confirm-group">
           <div class="checkbox-item confirm-checkbox" :class="{ 'is-checked': form.reason.confirmed }" @click="form.reason.confirmed = !form.reason.confirmed">
             <input type="checkbox" v-model="form.reason.confirmed" />
             <span class="checkbox-label required">确认信息无误,提交记录</span>
           </div>
         </div>

         <div class="nav-buttons">
           <button type="button" class="nav-btn" @click="goTo(8)">上一步</button>
           <button type="submit" class="submit-btn" @click="onSubmit" :disabled="!form.reason.confirmed">提交记录</button>
         </div>
       </div>
     </form>
   </div>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import { reactive, ref, computed, onMounted, watch, nextTick } from 'vue'
import Taro from '@tarojs/taro'

// 存储键名
const STORAGE_KEY = 'presentIllnessFormData'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const steps = [
  '起病情况',
  '症状特征',
  '伴随症状',
  '加重缓解',
  '诊疗经过',
  '疾病演变',
  '一般情况',
  '阴性病史',
  '就诊原因'
]

const currentSection = ref(1)

// 获取当前日期字符串（格式：YYYY-MM-DD）
function getTodayString(): string {
  const today = new Date()
  const year = today.getFullYear()
  const month = String(today.getMonth() + 1).padStart(2, '0')
  const day = String(today.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 日期选择 - 使用 NutUI Calendar
const showCalendar = ref(false)
const todayStr = getTodayString()

// 格式化显示日期时间
const displayDateTime = computed(() => {
  if (!form.onset.time) return ''
  const date = new Date(form.onset.time)
  if (isNaN(date.getTime())) return form.onset.time
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
})

// 日期时间确认
function onCalendarChoose(val: any) {
  showCalendar.value = false
  let dateStr = ''
  
  if (typeof val === 'string') {
    dateStr = val
  } else if (Array.isArray(val) && val.length >= 3) {
    // 兼容返回数组的情况，如 ['2025', '11', '16']
    const y = String(val[0])
    const m = String(val[1]).padStart(2, '0')
    const d = String(val[2]).padStart(2, '0')
    dateStr = `${y}-${m}-${d}`
  } else if (val && typeof val === 'object') {
    // 处理对象格式
    if (val.year && val.month && val.day) {
      const year = val.year
      const month = String(val.month).padStart(2, '0')
      const day = String(val.day).padStart(2, '0')
      dateStr = `${year}-${month}-${day}`
    }
  }
  
  if (dateStr) {
    form.onset.time = dateStr
  }
}

const onsetPickerVisible = ref(false)
const onsetTempDate = ref(todayStr)
function openOnsetPicker() {
  onsetTempDate.value = form.onset.time || todayStr
  onsetPickerVisible.value = true
}
function onOnsetConfirm(val: any) {
  const ds = typeof val === 'string' ? val : Array.isArray(val) ? `${val[0]}-${String(val[1]).padStart(2,'0')}-${String(val[2]).padStart(2,'0')}` : String(val || '')
  if (ds) form.onset.time = ds
  onsetPickerVisible.value = false
}
function onOnsetPickerNative(e: any) {
  const v = e?.detail?.value ?? e?.target?.value ?? ''
  if (v) form.onset.time = v
}

function openCalendar() {
  showCalendar.value = true
}
const onsetCalendarRef = ref()
watch(showCalendar, (v) => {
  if (v) {
    nextTick(() => {
      onsetCalendarRef.value?.scrollToDate?.(todayStr)
    })
  }
})

type Symptom = {
  id: number
  name: string
  location: string
  nature: string
  severity: string
  frequency: { type: string; detail: string }
  duration: string
}

const form = reactive({
  onset: {
    time: '',
    location: '',
    locationOther: '',
    type: '',
    cause: ''
  },
  symptoms: [
    {
      id: 1,
      name: '',
      location: '',
      nature: '',
      severity: '',
      frequency: { type: '', detail: '' },
      duration: ''
    } as Symptom
  ],
  accompany: {
    fever: { enabled: false, temp: '' },
    chills: false,
    nausea: { enabled: false, detail: '' },
    diarrhea: { enabled: false, detail: '' },
    rash: false,
    dizziness: false,
    dyspnea: false,
    palpitation: false,
    urinary: false,
    other: ''
  },
  factors: { aggravating: '', relieving: '' },
  care: {
    visitStatus: '',
    hospitalName: '',
    visitDate: '',
    outsideDiagnosis: '',
    exams: '',
    treatment: ''
  },
  progression: { type: '', frequencyChange: '', details: '' },
  general: {
    mental: '',
    appetite: '',
    sleep: '',
    weight: { change: '', amount: undefined as number | undefined, period: '' },
    excretion: { type: '', detail: '' }
  },
  negativeHistory: '',
  reason: { reasons: [] as string[], newSymptomDetail: '', otherDetail: '', confirmed: false }
})

function goTo(sectionNumber: number) {
  currentSection.value = sectionNumber
}

let symptomIdCounter = 1
function addSymptom() {
  symptomIdCounter += 1
  form.symptoms.push({
    id: symptomIdCounter,
    name: '',
    location: '',
    nature: '',
    severity: '',
    frequency: { type: '', detail: '' },
    duration: ''
  })
}

function removeSymptom(index: number) {
  form.symptoms.splice(index, 1)
}

function toggleReason(value: string) {
  const index = form.reason.reasons.indexOf(value)
  if (index > -1) {
    form.reason.reasons.splice(index, 1)
  } else {
    form.reason.reasons.push(value)
  }
}

// 处理 textarea 输入事件（兼容 Taro 和 Web 环境）
function handleTextareaInput(field: string, e: any) {
  // Taro 环境使用 e.detail.value，Web 环境使用 e.target.value
  const value = e?.detail?.value ?? e?.target?.value ?? e?.detail ?? ''
  console.log(`📝 textarea [${field}] 输入事件:`, {
    value,
    'e.detail': e?.detail,
    'e.target': e?.target,
    'e.detail.value': e?.detail?.value,
    'e.target.value': e?.target?.value
  })
  
  // 根据字段路径更新数据
  const fieldParts = field.split('.')
  if (fieldParts.length === 2) {
    const [obj, key] = fieldParts
    if (obj === 'care') {
      if (key === 'exams') form.care.exams = value
      else if (key === 'treatment') form.care.treatment = value
    } else if (obj === 'progression' && key === 'details') {
      form.progression.details = value
    }
  } else if (fieldParts.length === 1) {
    if (field === 'negativeHistory') {
      form.negativeHistory = value
    }
  }
  
  console.log(`✅ textarea [${field}] 已更新为:`, value)
}

// 深拷贝函数
function deepClone<T>(obj: T): T {
  return JSON.parse(JSON.stringify(obj))
}

// 保存表单数据到缓存
function saveFormData() {
  console.log('💾 ========== 开始保存表单数据 ==========')
  console.log('📋 存储键名:', STORAGE_KEY)
  
  try {
    // 深拷贝表单数据，避免 reactive 对象序列化问题
    console.log('📝 步骤1: 深拷贝表单数据...')
    const formDataCopy = deepClone(form)
    console.log('✅ 深拷贝完成，数据:', formDataCopy)
    
    // 特别检查 textarea 字段
    console.log('📝 步骤1.1: 检查 textarea 字段值...')
    console.log('  - form.care.exams:', form.care.exams, '类型:', typeof form.care.exams)
    console.log('  - form.care.treatment:', form.care.treatment, '类型:', typeof form.care.treatment)
    console.log('  - form.progression.details:', form.progression.details, '类型:', typeof form.progression.details)
    console.log('  - form.negativeHistory:', form.negativeHistory, '类型:', typeof form.negativeHistory)
    console.log('  - formDataCopy.care.exams:', formDataCopy.care?.exams, '类型:', typeof formDataCopy.care?.exams)
    console.log('  - formDataCopy.care.treatment:', formDataCopy.care?.treatment, '类型:', typeof formDataCopy.care?.treatment)
    console.log('  - formDataCopy.progression.details:', formDataCopy.progression?.details, '类型:', typeof formDataCopy.progression?.details)
    console.log('  - formDataCopy.negativeHistory:', formDataCopy.negativeHistory, '类型:', typeof formDataCopy.negativeHistory)
    
    // 检查数据是否为空
    if (!formDataCopy || Object.keys(formDataCopy).length === 0) {
      console.warn('⚠️ 警告：表单数据为空，跳过保存')
      return
    }
    
    // 尝试序列化
    console.log('📝 步骤2: 序列化数据...')
    let jsonData: string
    try {
      jsonData = JSON.stringify(formDataCopy)
      console.log('✅ 序列化成功，JSON长度:', jsonData.length)
      console.log('📄 JSON数据预览:', jsonData.substring(0, 200) + '...')
    } catch (stringifyError) {
      console.error('❌ 序列化失败:', stringifyError)
      throw new Error('数据序列化失败: ' + stringifyError)
    }
    
    // 检查 Taro 对象是否存在
    console.log('📝 步骤3: 检查 Taro 对象...')
    if (!Taro || !Taro.setStorageSync) {
      console.error('❌ Taro.setStorageSync 不存在')
      throw new Error('Taro.setStorageSync 方法不存在')
    }
    console.log('✅ Taro.setStorageSync 可用')
    
    // 保存到本地缓存 - 尝试直接保存对象（Taro会自动序列化）
    console.log('📝 步骤4: 保存数据到缓存（方式1：直接保存对象）...')
    try {
      Taro.setStorageSync(STORAGE_KEY, formDataCopy)
      console.log('✅ 方式1保存完成')
    } catch (error1) {
      console.warn('⚠️ 方式1失败，尝试方式2（保存字符串）:', error1)
      // 如果直接保存对象失败，尝试保存字符串
      Taro.setStorageSync(STORAGE_KEY, jsonData)
      console.log('✅ 方式2保存完成（字符串）')
    }
    
    // 立即验证保存是否成功
    console.log('📝 步骤5: 验证保存结果...')
    const verify = Taro.getStorageSync(STORAGE_KEY)
    
    if (verify) {
      console.log('✅ 验证成功：缓存中找到了数据')
      console.log('📦 验证数据类型:', typeof verify)
      console.log('📦 验证数据预览:', 
        typeof verify === 'string' 
          ? verify.substring(0, 200) + '...' 
          : JSON.stringify(verify).substring(0, 200) + '...'
      )
      
      // 尝试解析验证数据
      try {
        const verifyParsed = typeof verify === 'string' ? JSON.parse(verify) : verify
        console.log('✅ 验证数据可以正常解析')
        console.log('📊 验证数据字段:', Object.keys(verifyParsed))
      } catch (parseError) {
        console.warn('⚠️ 验证数据解析失败（可能不是JSON）:', parseError)
      }
    } else {
      console.error('❌ 验证失败：缓存中没有找到数据')
      console.error('🔍 可能的原因：')
      console.error('  1. setStorageSync 执行失败但没有抛出异常')
      console.error('  2. 存储空间已满')
      console.error('  3. 权限问题')
      
      // 尝试使用异步API
      console.log('🔄 尝试使用异步API保存...')
      Taro.setStorage({
        key: STORAGE_KEY,
        data: formDataCopy,
        success: () => {
          console.log('✅ 异步保存成功')
        },
        fail: (err) => {
          console.error('❌ 异步保存也失败:', err)
        }
      })
    }
    
    console.log('💾 ========== 保存流程完成 ==========')
    
  } catch (error: any) {
    console.error('❌ ========== 保存表单数据失败 ==========')
    console.error('错误详情:', error)
    console.error('错误类型:', error?.constructor?.name)
    console.error('错误消息:', error?.message)
    console.error('错误堆栈:', error?.stack)
    
    Taro.showToast({
      title: '保存数据失败: ' + (error?.message || '未知错误'),
      icon: 'none',
      duration: 3000
    })
  }
}

// 从缓存读取表单数据
function loadFormData() {
  console.log('📖 ========== 开始加载缓存数据 ==========')
  console.log('📋 存储键名:', STORAGE_KEY)
  
  try {
    // 检查 Taro 对象
    if (!Taro || !Taro.getStorageSync) {
      console.error('❌ Taro.getStorageSync 不存在')
      return
    }
    
    console.log('📝 步骤1: 从缓存读取数据...')
    const savedData = Taro.getStorageSync(STORAGE_KEY)
    
    console.log('📦 读取结果:', savedData)
    console.log('📦 数据类型:', typeof savedData)
    console.log('📦 是否为null:', savedData === null)
    console.log('📦 是否为undefined:', savedData === undefined)
    console.log('📦 是否为空字符串:', savedData === '')
    
    if (savedData !== null && savedData !== undefined && savedData !== '') {
      console.log('✅ 找到缓存数据')
      
      // 尝试解析数据
      console.log('📝 步骤2: 解析数据...')
      let parsedData: any
      
      if (typeof savedData === 'string') {
        try {
          parsedData = JSON.parse(savedData)
          console.log('✅ 字符串解析成功')
        } catch (parseError) {
          console.error('❌ JSON解析失败:', parseError)
          console.error('原始数据:', savedData.substring(0, 200))
          return
        }
      } else {
        // 如果已经是对象，直接使用
        parsedData = savedData
        console.log('✅ 数据已经是对象格式')
      }
      
      console.log('📦 解析后的数据:', parsedData)
      console.log('📦 数据字段:', Object.keys(parsedData || {}))
      
      // 深度合并数据到 form
      if (parsedData && typeof parsedData === 'object') {
        console.log('📝 步骤3: 合并数据到表单...')
        
        // 合并各个字段
        if (parsedData.onset) {
          console.log('  - 合并 onset 字段')
          Object.assign(form.onset, parsedData.onset)
        }
        if (parsedData.symptoms && Array.isArray(parsedData.symptoms)) {
          console.log('  - 合并 symptoms 字段，数量:', parsedData.symptoms.length)
          form.symptoms = parsedData.symptoms
        }
        if (parsedData.accompany) {
          console.log('  - 合并 accompany 字段')
          Object.assign(form.accompany, parsedData.accompany)
        }
        if (parsedData.factors) {
          console.log('  - 合并 factors 字段')
          Object.assign(form.factors, parsedData.factors)
        }
        if (parsedData.care) {
          console.log('  - 合并 care 字段')
          Object.assign(form.care, parsedData.care)
        }
        if (parsedData.progression) {
          console.log('  - 合并 progression 字段')
          Object.assign(form.progression, parsedData.progression)
        }
        if (parsedData.general) {
          console.log('  - 合并 general 字段')
          Object.assign(form.general, parsedData.general)
        }
        if (parsedData.negativeHistory !== undefined) {
          console.log('  - 合并 negativeHistory 字段')
          form.negativeHistory = parsedData.negativeHistory
        }
        if (parsedData.reason) {
          console.log('  - 合并 reason 字段')
          Object.assign(form.reason, parsedData.reason)
        }
        
        console.log('✅ 表单数据已从缓存加载并合并')
        console.log('📊 当前表单数据:', deepClone(form))
      } else {
        console.warn('⚠️ 解析后的数据不是有效对象')
      }
    } else {
      console.log('ℹ️ 没有找到缓存数据（可能首次使用）')
    }
    
    console.log('📖 ========== 加载流程完成 ==========')
  } catch (error: any) {
    console.error('❌ ========== 加载表单数据失败 ==========')
    console.error('错误详情:', error)
    console.error('错误类型:', error?.constructor?.name)
    console.error('错误消息:', error?.message)
    console.error('错误堆栈:', error?.stack)
    
    Taro.showToast({
      title: '加载数据失败: ' + (error?.message || '未知错误'),
      icon: 'none',
      duration: 2000
    })
  }
}

// 组件挂载时加载缓存数据
onMounted(() => {
  console.log('🚀 组件已挂载，开始加载缓存数据...')
  loadFormData()
  // 如果日期为空，设置为当前日期
  if (!form.onset.time) {
    form.onset.time = todayStr
  }
  showCalendar.value = false
})

function onSubmit() {
  console.log('📝 开始提交表单...')
  console.log('当前表单数据:', deepClone(form))
  
  // 保存数据到缓存
  saveFormData()
  
  // 这里可替换为真实提交逻辑
  Taro.showToast({
    title: '表单提交成功！',
    icon: 'success',
    duration: 2000
  })
}
</script>


<style scoped>
.form-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
  max-width: 100%;
}

.tip {
  text-align: center;
  margin-bottom: 20px;
  color: #666;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

.required::after {
  content: '★';
  color: #ff4757;
  margin-left: 3px;
}

/* 进度条优化 - 占满宽度 */
.progress-bar {
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 8px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.progress-bar::-webkit-scrollbar {
  height: 4px;
}

.progress-bar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.progress-bar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.progress-bar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.progress-bar-inner {
  display: flex;
  position: relative;
  min-width: max-content;
}

.progress-bar-inner::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #eee;
  z-index: 1;
  width: 100%;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: 0 8px;
  min-width: fit-content;
  overflow: visible;
}

.step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.active .step-number {
  background-color: #2c80ff;
  color: #fff;
}

.step-name {
  font-size: 16px;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  font-weight: 500;
  color: #333;
}

.active .step-name {
  color: #2c80ff;
  font-weight: 600;
}

.form-section {
  display: block;
}

.form-section h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  line-height: 1.5;
}

.form-section p {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.form-group {
  margin-bottom: 26px;
}

label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 20px;
  color: #333;
  line-height: 1.5;
}

/* 所有输入框统一样式 - 优化字体、背景和边框 */
.form-input,
input[type='text'],
input[type='number'],
input[type='date'],
input[type='datetime-local'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='search'],
select.form-input,
textarea.form-input {
  width: 100%;
  padding: 22px 26px;
  border: 2px solid #d0d7de;
  border-radius: 12px;
  font-size: 24px !important; /* 增大字体，确保所有输入框都应用 */
  background-color: #f8f9fa !important; /* 添加浅灰色背景 */
  color: #333 !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.7;
  min-height: 64px; /* 增大触摸目标 */
  transition: all 0.3s ease;
  font-weight: 500;
  display: block;
}

.form-input:hover,
input[type='text']:hover,
input[type='number']:hover,
input[type='date']:hover,
input[type='datetime-local']:hover,
input[type='email']:hover,
input[type='tel']:hover,
input[type='url']:hover,
input[type='search']:hover,
select.form-input:hover,
textarea.form-input:hover {
  border-color: #b0b7c0 !important;
  background-color: #f0f1f3 !important;
}

.form-input:focus,
input:focus,
input[type='text']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='url']:focus,
input[type='search']:focus,
select.form-input:focus,
textarea.form-input:focus {
  border-color: #2c80ff !important;
  background-color: #fff !important; /* 聚焦时背景变为白色，更清晰 */
  outline: none;
  box-shadow: 0 0 0 4px rgba(44, 128, 255, 0.15) !important;
  transform: translateY(-1px);
}

textarea.form-input,
textarea {
  min-height: 150px;
  resize: vertical;
  font-family: inherit;
  font-size: 24px !important;
  line-height: 1.7;
  padding: 22px 26px;
  background-color: #f8f9fa !important;
  border: 2px solid #d0d7de;
  border-radius: 12px;
  transition: all 0.3s ease;
  font-weight: 500;
}

textarea:hover {
  border-color: #b0b7c0 !important;
  background-color: #f0f1f3 !important;
}

textarea:focus {
  border-color: #2c80ff !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(44, 128, 255, 0.15) !important;
  transform: translateY(-1px);
}

/* 单选框和复选框组 - 垂直排列 */
.checkbox-group,
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.checkbox-item,
.radio-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  min-height: 60px; /* 增大触摸目标 */
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid #e9ecef;
  position: relative;
}

/* 选中状态 - 使用更兼容的方式 */
.checkbox-item input:checked ~ .checkbox-label,
.radio-item input:checked ~ .radio-label {
  color: #2c80ff;
  font-weight: 600;
}

.checkbox-item input:checked,
.radio-item input:checked {
  accent-color: #2c80ff;
}

/* 选中状态的背景和边框 */
.checkbox-item:has(input:checked),
.radio-item:has(input:checked) {
  background-color: #e7f3ff;
  border-color: #2c80ff;
  border-width: 2px;
}

/* 兼容性更好的选中状态样式 */
.checkbox-item input[type="checkbox"]:checked + .checkbox-label,
.radio-item input[type="radio"]:checked + .radio-label {
  color: #2c80ff;
  font-weight: 600;
}

.checkbox-item:active,
.radio-item:active {
  background-color: #f0f0f0;
}

.checkbox-item input,
.radio-item input {
  margin-top: 2px;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
  accent-color: #2c80ff;
  position: relative;
  z-index: 1;
}

.checkbox-item label,
.radio-item label {
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  flex: 1;
  cursor: pointer;
  line-height: 1.5;
}

/* 内联输入框 - 换行显示 */
.inline-input {
  display: block;
  width: 100%;
  margin-top: 12px;
  margin-left: 0;
  padding: 20px 24px;
  font-size: 24px !important;
  min-height: 64px;
  border: 2px solid #d0d7de;
  border-radius: 12px;
  background-color: #f8f9fa !important;
  color: #333 !important;
  transition: all 0.3s ease;
  font-weight: 500;
  box-sizing: border-box;
}

.inline-input:hover {
  border-color: #b0b7c0 !important;
  background-color: #f0f1f3 !important;
}

.inline-input:focus {
  border-color: #2c80ff !important;
  background-color: #fff !important;
  outline: none;
  box-shadow: 0 0 0 4px rgba(44, 128, 255, 0.15) !important;
  transform: translateY(-1px);
}

.add-btn {
  background-color: #2c80ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 18px 24px;
  font-size: 19px;
  cursor: pointer;
  margin-top: 16px;
  width: 100%;
  min-height: 56px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(44, 128, 255, 0.2);
}

.add-btn:active {
  background-color: #1a6fe0;
}

.remove-btn {
  background-color: #ff4757;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 18px;
  cursor: pointer;
  margin-top: 16px;
  width: 100%;
  min-height: 56px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.2);
}

.remove-btn:active {
  background-color: #e63946;
}

.symptom-item {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 2px solid #e9ecef;
}

/* 确保症状项内的输入框有正确的样式 */
.symptom-item input[type='text'],
.symptom-item input[type='number'] {
  width: 100%;
  padding: 22px 26px;
  border: 2px solid #d0d7de;
  border-radius: 12px;
  font-size: 24px !important;
  background-color: #f8f9fa !important;
  color: #333 !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.7;
  min-height: 64px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.symptom-item input[type='text']:hover,
.symptom-item input[type='number']:hover {
  border-color: #b0b7c0 !important;
  background-color: #f0f1f3 !important;
}

.symptom-item input[type='text']:focus,
.symptom-item input[type='number']:focus {
  border-color: #2c80ff !important;
  background-color: #fff !important;
  outline: none;
  box-shadow: 0 0 0 4px rgba(44, 128, 255, 0.15) !important;
  transform: translateY(-1px);
}

.nav-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #eee;
  align-items: stretch;
}

.nav-btn {
  background-color: #f1f1f1;
  border: none;
  border-radius: 8px;
  padding: 0;
  font-size: 19px;
  cursor: pointer;
  width: 50%;
  flex: 1 1 50%;
  height: 60px; /* 增大高度，确保触摸目标足够大 */
  font-weight: 600;
  transition: all 0.2s ease;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  margin: 0; /* 确保没有margin */
  border: 2px solid transparent;
}

.nav-btn:active {
  background-color: #e0e0e0;
}

.nav-btn.next {
  background-color: #2c80ff;
  color: #fff;
  margin: 0; /* 确保没有margin-top */
  box-shadow: 0 2px 8px rgba(44, 128, 255, 0.3);
}

.nav-btn.next:active {
  background-color: #1a6fe0;
}

.submit-btn {
  background-color: #2c80ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 18px 24px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  flex: 1 1 50%;
  min-height: 60px;
  transition: all 0.2s ease;
  margin: 0;
  box-shadow: 0 4px 12px rgba(44, 128, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}

.submit-btn:active:not(:disabled) {
  background-color: #1a6fe0;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 特别优化第9步的复选框组 */
.form-section:last-of-type .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-section:last-of-type .checkbox-item {
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 8px;
  min-height: 60px;
}

/* 确认复选框 */
.form-group .checkbox-item {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  padding: 18px;
  min-height: 64px;
  border-radius: 8px;
}

.form-group .checkbox-item .required {
  font-weight: 600;
  color: #333;
}

/* 确保所有可点击元素都有足够大的触摸目标 */
input[type='checkbox'],
input[type='radio'] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
}

/* 新增样式 - 修复交互和字体 */
.checkbox-label,
.radio-label {
  flex: 1;
  font-size: 19px;
  color: #333;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

/* 选中状态优化 - 增强视觉效果 */
.checkbox-item:has(input:checked),
.radio-item:has(input:checked),
.checkbox-item.is-checked,
.radio-item.is-checked {
  background-color: #e7f3ff !important;
  border-color: #2c80ff !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(44, 128, 255, 0.1);
}

.checkbox-item.is-checked .checkbox-label,
.radio-item.is-checked .radio-label {
  color: #2c80ff !important;
  font-weight: 600 !important;
}

/* 为不支持 :has() 的浏览器提供备用方案 */
.checkbox-item input[type="checkbox"]:checked,
.radio-item input[type="radio"]:checked {
  filter: brightness(1.2);
}

/* 添加边框 - 已在上面定义，这里移除重复 */

/* 内联输入组 */
.inline-inputs-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-top: 10px;
}

.inline-inputs-group .inline-input {
  flex: 1;
  min-width: 100px;
  margin-top: 0;
  font-size: 24px !important;
  padding: 20px 24px;
  min-height: 64px;
  background-color: #f8f9fa !important;
  border: 2px solid #d0d7de;
  border-radius: 12px;
  color: #333 !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.inline-inputs-group .inline-input:hover {
  border-color: #b0b7c0 !important;
  background-color: #f0f1f3 !important;
}

.inline-inputs-group .inline-input:focus {
  border-color: #2c80ff !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(44, 128, 255, 0.15) !important;
  transform: translateY(-1px);
}

.inline-text {
  font-size: 18px;
  color: #666;
  font-weight: 500;
}

/* 确认组优化 */
.confirm-group {
  margin-top: 24px;
}

.confirm-checkbox {
  background-color: #fff3cd !important;
  border: 2px solid #ffc107 !important;
}

.confirm-checkbox .checkbox-label {
  font-weight: 600;
  font-size: 19px;
}

.confirm-checkbox:has(input:checked),
.confirm-checkbox.is-checked {
  background-color: #fff3cd !important;
  border-color: #ff9800 !important;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

.confirm-checkbox.is-checked .checkbox-label {
  color: #e65100 !important;
}

/* 日期时间显示样式 */
.datetime-display {
  cursor: pointer;
  user-select: none;
  color: #333;
}

.datetime-display:active {
  background-color: #f0f1f3 !important;
}

/* 触摸反馈优化 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 防止iOS缩放 - 保持较大字体 */
@media screen and (max-width: 768px) {
  input[type='text'],
  input[type='number'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='email'],
  input[type='tel'],
  input[type='url'],
  input[type='search'],
  select,
  textarea {
    font-size: 22px !important; /* 保持较大字体，防止iOS自动缩放 */
    padding: 20px 24px;
  }
  
  textarea {
    font-size: 22px !important;
  }
  
  .inline-input {
    font-size: 22px !important;
    padding: 18px 22px;
  }
  
  .symptom-item input[type='text'],
  .symptom-item input[type='number'] {
    font-size: 22px !important;
  }
  
  .form-section h2 {
    font-size: 20px;
  }
  
  label {
    font-size: 18px;
  }
  
  .checkbox-label,
  .radio-label {
    font-size: 17px;
  }
}
.form-container { padding: 24rpx; }
.tip { margin-bottom: 24rpx; font-size: 26rpx; }
.progress-step { margin-bottom: 12rpx; }
.step-number { width: 44rpx; height: 44rpx; margin-bottom: 8rpx; font-size: 24rpx; }
.step-name { font-size: 26rpx; }
.form-section { margin-bottom: 28rpx; }
h2 { font-size: 30rpx; margin-bottom: 20rpx; }
.form-group { margin-bottom: 24rpx; }
label { font-size: 28rpx; margin-bottom: 12rpx; }
.form-input,
input[type='text'],
input[type='number'],
select,
textarea { padding: 24rpx 24rpx; border-width: 2rpx; font-size: 28rpx !important; min-height: 72rpx; }
.datetime-display { padding: 24rpx 24rpx; min-height: 72rpx; border-width: 2rpx; }
.inline-input { padding: 24rpx 24rpx; min-height: 72rpx; border-width: 2rpx; font-size: 28rpx !important; }
.radio-item { padding: 16rpx 12rpx; border-width: 2rpx; min-height: 64rpx; }
.radio-label { font-size: 28rpx; }
.submit-btn, .nav-btn { min-height: 72rpx; font-size: 28rpx; }
</style>


